<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-07-09 16:27:12
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-07-23 09:26:58
 * @Description  : 
-->
<template>
	<view class="commentList">
		<z-paging
			ref="paging"
			v-model="dataList"
			:auto-height="true"
			:fixed="false"
			:show-refresher-when-reload="true"
			:auto-show-back-to-top="true"
			:refresher-fps="0"
			:refresher-end-bounce-enabled="false"
			:refresher-default-duration="0"
			:refresher-complete-delay="150"
			refresher-pulling-text="松开刷新"
			refresher-default-text="再往下拉"
			:refresher-complete-duration="0"
			:refresher-refreshing-scrollable="false"
			@query="queryList">
			<!-- 顶部不随滚动区域 -->
			<!-- <template #top>
			</template> -->

			<!-- 内容区域 -->
			<view class="bannerTotal">
				<view class="score">{{averageValue.overallStarAvg}}</view>
				<view class="scoreRate">
					<view class="commonScoreTitle">商家评分</view>
					<uv-rate
						:readonly="true"
						activeIcon="star-fill"
						:allowHalf="true"
						inactiveIcon="star-fill"
						:value="averageValue.overallStarAvg"
						inactiveColor="#c8c9cc"
						:active-color="themeColor"
						gutter="1"
						size="18"
						:count="5"></uv-rate>
				</view>
				<view class="scoreItem">
					<view class="commonScoreTitle">口味</view>
					<div class="scoreValue">{{averageValue.tasteStarAvg}}</div>
				</view>
				<view class="scoreItem">
					<view class="commonScoreTitle">包装</view>
					<div class="scoreValue">{{averageValue.packStarAvg}}</div>
				</view>
			</view>
			<view
				class="commentItem"
				v-for="(item, index) in dataList"
				:key="index"
				@click="itemClick(item, index)">
				<view class="topArea">
					<view class="imageBox">
						<image style="width: 100%; height: 100%" :src="item.avatar"></image>
					</view>
					<view class="nickname">
						<view class="name">{{ item.nickname }}</view>
						<view class="time">{{ item.createTime }}</view>
					</view>
				</view>
				<view class="rateClass">
					<uv-rate
						:readonly="true"
						activeIcon="star-fill"
						inactiveIcon="star-fill"
						:value="item.overallStar"
						inactiveColor="#c8c9cc"
						:active-color="themeColor"
						gutter="1"
						size="18"
						:count="5"></uv-rate>
					<view class="rateClass_content">
						{{ mapInfo.find(ele => ele.value == item.overallStar)?.name }}
					</view>
				</view>
				<view class="commentClass">
					{{ item.comment }}
				</view>
				<view class="picsClass" v-if="item.pictures && item.pictures.length > 0">
					<scroll-view scroll-x class="cartInfoBoxInner">
						<view
							class="cartInfoItem"
							v-for="(img, index) in item.pictures"
							:key="index">
							<view class="cartInfoItemInner">
								<image @click="previewImage(item.pictures, index)" :src="img" mode="aspectFill" class="image"></image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { ref,onMounted } from 'vue'
	import { commentList,getAverage } from '@/api/goods'
	import { useMainStore } from '@/store/store'
	import { storeToRefs } from 'pinia'
	const main = useMainStore()
	const { themeColor } = storeToRefs(main)
	const props = defineProps({
		shopId: {
			type: [Number, String],
			default: 0,
		},
	})
	// 分页数据
	const dataList = ref([])
	// 引用 z-paging 组件实例
	const paging = ref(null)
	const mapInfo = ref([
		{ name: '非常满意', value: 5 },
		{ name: '满意', value: 4 },
		{ name: '一般', value: 3 },
		{ name: '差', value: 2 },
		{ name: '非常差', value: 1 },
	])
    const averageValue = ref({})
	// 分页查询函数
	const queryList = async (pageNo, pageSize) => {
		
		const params = {
			pageNo,
			pageSize,
			shopId: props.shopId,
		}
		try {
            getAverageValue()
			const ordersData = await commentList(params)
			let list = ordersData.list || []
			list.forEach(item => {
				item.pictures = item.pictures ? item.pictures.split(',') : []
			})
			// setTimeout(() => {
				paging.value?.complete(list)
			// }, 350);
		} catch (err) {
			paging.value?.complete(false)
		}
	}
    const getAverageValue = async ()=>{
        const res = await getAverage({shopId:props.shopId})
        console.log(res);
        console.log(res);
        if (res) {
            averageValue.value = res
        }
    }
	// 点击列表项
	function itemClick(item, index) {
		console.log('点击了', item.title)
	}
	const previewImage = (list, index) => {
		uni.previewImage({
			current: list[index],
			urls: list,
			indicator: 'number',
			loop: true,
		})
	}
</script>

<style scoped lang="scss">
	.commentList {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		border-radius: 20rpx;
	}
	.bannerTotal {
		display: flex;
		align-items: flex-end;
		padding: 30rpx 0 30rpx 30rpx;
		border-radius: 0 0 20rpx 20rpx;
		background-color: #fff;
		margin-bottom: 16rpx;
		.commonScoreTitle {
			color: #adadad;
			font-size: 26rpx;
			margin-bottom: 10rpx;
		}
		.scoreValue {
			font-size: 34rpx;
			color: #000;
            line-height: 1;
		}
		.score {
			margin-right: 20rpx;
			color: $qingzhen-btn-primary-color;
			line-height: 1;
			font-size: 54rpx;
		}
		.scoreRate {
			color: #000;
			margin-right: 50rpx;
		}
		.scoreItem {
			color: #000;
			margin-right: 50rpx;
		}
	}

	.commentItem {
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 2rpx solid #f5f5f5;
		margin-bottom: 16rpx;
		.topArea {
			display: flex;
			align-items: center;
			.imageBox {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 20rpx;
			}
			.nickname {
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				color: #000;
				.name {
					font-size: 28rpx;
				}
				.time {
					color: #adadad;
					font-size: 26rpx;
				}
			}
		}
		.rateClass {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			color: #adadad;
			.rateClass_content {
				margin-left: 6rpx;
				font-size: 26rpx;
			}
		}
		.commentClass {
			margin-top: 16rpx;
			font-size: 30rpx;
		}
		.picsClass {
			width: 100%;
			height: 150rpx;
			margin-top: 16rpx;
			.cartInfoBoxInner {
				width: 100%;
                white-space: nowrap;
                overflow: hidden;
				.cartInfoItem {
					display: inline-block;
					.cartInfoItemInner {
						height: 150rpx;
						display: flex;
						width: 100%;
						image {
							margin-right: 20rpx;
                            width: 150rpx;
                            height: 150rpx;
                            background-color: #f6f6f6;
                            border-radius: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
